<html>
<head>
    <title>人品计算</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css"/>
    <script type="text/javascript" src="./extjs/bootstrap.js"></script>
    <script type="text/javascript" src="./extjs/ext-all.js"></script>
    <style type="text/css">
        #washington {
            color: #3E576F;
            font-size: 25px;
            width: 80%;
            font-weight: 200;
            padding: 0px 15px 8px 8px;
            text-shadow: 0 1px 0 #bab3b3;
            float: left;
            text-align: left;
        }

        #quit {
            color: #3E576F;
            width: 20%;
            font-size: 15px;
            font-weight: 200;
            padding: 23px 3px 28px 8px;
            text-shadow: 0 1px 0 #fff;
            float: right;
            text-align: right;
        }
    </style>
</head>
<body>
</body>
<script type="text/javascript">

Ext.require([
    'Ext.tree.*',
    'Ext.data.*',
    'Ext.tip.*' 
]);

//性格菜单模型
Ext.define('Menu', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id'},
        {name: 'name'},
        {name: 'text'},
        {name: 'parentId'},
        {name: 'orderNumber',type:"int"},
        {name: 'leaf'},
        {name: 'children'},
        {name: 'url'}
    ]
});


Ext.onReady(function() {

    var menuTreeArr = [
        {"id":"1001","parentId":"1000","text":"人品管理",expanded: true,
            "children":[
                {"id":"10011","parentId":"1001","text":"人品管理",expanded: true,
                    "children":[
                        {"id":"100111","parentId":"10011","text":"查询人品","leaf":true,"url":"show_character.html",expanded: true}      
                    ]
                }
            ]
        }
    ];

    var menuTreeStore = Ext.create('Ext.data.TreeStore', {
        model: 'Menu',
        sorters: [
            {
                property : 'id',
                direction: 'ASC'
            }
        ],
        root: {
            text: '菜单',
            id: '0',
            expanded: true,
            children:menuTreeArr
        }
    });

    var menuTreePanel = Ext.create('Ext.tree.Panel', {
        id:'menuTree',
        useArrows: true,
        split:true,
        autoScroll:true,
        header: false,
        border: false,
        rootVisible: false,
        region:'west',
        width:200,
        minWidth: 150,
        collapsible: true,
        collapseMode: 'mini',
        store: menuTreeStore,
        dockedItems: [{
            xtype: 'toolbar',
            items: ["MIS"]
        }]
    });
    menuTreePanel.getSelectionModel().on('selectionchange', menuManage);


    var headPanel = Ext.create('Ext.panel.Panel', {
        region: 'north',
        height: 50,
        border: false,
        frame :true,
        html:'<div id="washington">测试人品</div><div id="quit"><span id="loginName"></span>&nbsp;&nbsp;&nbsp;<span style="cursor:pointer;" onclick="javascript:quitApp();">退出</span></div>'
    });

    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        renderTo: Ext.getBody(),
        items: [
            menuTreePanel,headPanel,
            {
                region: 'center',
                xtype: 'tabpanel',
                activeTab: 0,
                id:'tab1',
                items: {
                    title: '&nbsp;首页&nbsp;',
                    html: "<iframe style='width:100%;height:100%' frameborder='0' src='show_character.html'></iframe>",
                    closable:false
                }
            }
        ]
    });
    
    function menuManage(){
        var selection = menuTreePanel.getSelectionModel().getSelection();
        if(selection.length > 0){
            if(selection[0].get("leaf")){
                showUrl(selection[0].get('text'),selection[0].get('url'),selection[0].get('id'));
            }
        }
    }
    
    function showUrl(title, url, pid) {
        var tabs = Ext.getCmp('tab1');
        var nowPanel = tabs.getComponent(pid);
        if (nowPanel) {
            var el = nowPanel.getEl();
            var frameHtml = el.query('iframe')[0];
            frameHtml.src = url;
            tabs.setActiveTab(nowPanel);
        } else {
            var str = "<iframe  style='width:100%;height:100%' frameborder='0' src='" + url + "'></iframe>";
            tabs.add({
                id:pid,
                title:title,
                html:str,
                closable:true
            }).show();
        }
    }
    
});

</script>

</html>